<template>
    <!-- 播放的视频容器 -->
    <div class="topinfo">（{{storeMain.vedio.playziyuanname}}）{{storeMain.vedio.playname}}- {{storeMain.vedio.playorder}}</div>
    <div class="player" id="mse"></div>
    <div class="mode drag"></div>
</template>
<script setup>
import Player from 'xgplayer';
import HlsPlugin from 'xgplayer-hls'
import 'xgplayer/dist/index.min.css';

import {onMounted, watch} from "vue";
// import XgPlayer from '@renderer/components/playerXgplayer.vue'

import {useStoreMain} from '@renderer/store/storeindex.js';
const storeMain = useStoreMain();

watch(() => storeMain.vedio.playurl, (newValue, oldValue) => {
    console.log(newValue, oldValue);
    initPlayer();
}, {deep: true})

onMounted(() => {
    initPlayer();
})
function initPlayer() {
    let player = new Player({
        id: 'mse',
        url: storeMain.vedio.playurl,
        autoplay: true,
        height: '100%',
        width: '100%',
        videoFillMode: 'contain',
        plugins: [HlsPlugin],
    });
}
</script>
<style lang="scss" scoped>
.player {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-color: #000 !important;
}
.topinfo {
    position: absolute;
    left: 10px;
    top: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: rgb(34 31 31 / 0%);
    color: #fff;
    z-index: 1;
}
.mode {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 130px);
    background-color: #fff;
    opacity: 0;
}
.xgplayer video {
    background-color: #000;
}
</style>
